<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="发票代码">
        <el-input v-model="searchForm.code" size="small" placeholder="请输入发票代码" />
      </el-form-item>
      <el-form-item label="发票类型">
        <el-select v-model="searchForm.type" placeholder="请选择发票类型" size="small">
          <el-option label="增值税专用发票" value="0" />
          <el-option label="普通发票" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" icon="el-icon-search" @click="onSubmit">查询</el-button>
        <el-button type="default" size="small" icon="el-icon-refresh" @click="restSearch">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 按钮组 -->
    <el-row>
      <el-button type="primary" size="small" icon="el-icon-plus" plain @click="openAdd">增加</el-button>
    </el-row>
    <!-- 表格 -->
    <el-table v-loading="loading" :data="invoiceList">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" prop="id" />
      <el-table-column label="发票类型" prop="type" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{ scope.row.type==='0'?'增值税专用发票':'普通发票' }}
        </template>
      </el-table-column>
      <el-table-column label="发票代码" prop="code" :show-overflow-tooltip="true" />
      <el-table-column label="发票税率（%）" prop="taxRate" :show-overflow-tooltip="true">
        <template slot-scope="scope">{{ scope.row.taxRate }}%</template>
      </el-table-column>
      <el-table-column label="发票税额" prop="taxAmount" :show-overflow-tooltip="true" />
      <el-table-column label="纳税人识别号" prop="userKeyNumber" :show-overflow-tooltip="true" />
      <el-table-column label="开票日期" prop="createTime" :show-overflow-tooltip="true" />
      <el-table-column label="操作时间" prop="updateTime" :show-overflow-tooltip="true" />
      <el-table-column label="操作人" prop="operator" :show-overflow-tooltip="true" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="openEdit(scope.row)"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handlerDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :current-page="searchForm.page"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="searchForm.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="searchForm.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- dialog -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="addVisible"
      width="40%"
      :before-close="handleClose"
    >
      <el-form ref="dialogForm" label-width="80px" :model="dialogForm" :rules="invoiceRule">
        <el-form-item label="发票类型" prop="type">
          <el-select v-model="dialogForm.type" placeholder="请选择发票类型" size="small" style="width:100%">
            <el-option label="增值税专用发票" value="0" />
            <el-option label="普通发票" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="发票代码" prop="code">
          <el-input v-model.number="dialogForm.code" size="small" />
        </el-form-item>
        <el-form-item label="发票税率" prop="taxRate">
          <el-input v-model.number="dialogForm.taxRate" size="small" />
        </el-form-item>
        <el-form-item label="发票税额" prop="taxAmount">
          <el-input v-model.number="dialogForm.taxAmount" size="small" />
        </el-form-item>
        <el-form-item label="纳税人号" prop="userKeyNumber">
          <el-input v-model="dialogForm.userKeyNumber" size="small" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="dialogTitle === '添加'" type="primary" size="small" @click="addHandler('dialogForm','add')">添 加</el-button>
        <el-button v-if="dialogTitle === '修改'" type="primary" size="small" @click="addHandler('dialogForm','edit')">修 改</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>

import { list, del, add, update } from '@/api/invocie'
export default {
  name: 'UiIndex',
  data() {
    return {
      // 搜索条件
      searchForm: {
        code: '',
        type: '',
        // 分页
        page: 1,
        limit: 10,
        total: 0
      },
      // 发票数据
      invoiceList: [],
      loading: true,
      // 弹出层标题
      dialogTitle: '',
      addVisible: false,
      dialogForm: {
        type: '',
        code: '',
        taxRate: '',
        taxAmount: '',
        userKeyNumber: '',
        id: 0
      },
      invoiceRule: {
        type: [{ required: true, message: '请选择税票类型', trigger: 'blur' }],
        code: [
          { required: true, message: '请输入发票代码', trigger: 'blur' },
          { type: 'number', message: '发票代码必须为数字', trigger: 'blur' }
        ],
        taxRate: [
          { required: true, message: '请输入发票税率', trigger: 'blur' },
          { type: 'number', message: '发票税率必须为数字', trigger: 'blur' }
        ],
        taxAmount: [
          { required: true, message: '请输入发票税额', trigger: 'blur' },
          { type: 'number', message: '发票税额必须为数字', trigger: 'blur' }
        ],
        userKeyNumber: [
          { required: true, message: '请输入纳税人号', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getInvoiceData()
  },
  methods: {
    // 搜索
    onSubmit() {
      this.getInvoiceData()
    },
    // 获取发票数据
    getInvoiceData() {
      list(this.searchForm).then(res => {
        const { data } = res
        this.invoiceList = data.list
        this.searchForm.total = data.total
        this.loading = false
      })
    },
    // 每页显示几条
    handleSizeChange(val) {
      console.log(val)
      this.searchForm.limit = val
      this.getInvoiceData()
    },
    // 前去第几页
    handleCurrentChange(val) {
      this.searchForm.page = val
      this.getInvoiceData()
    },
    // 重置搜索表单
    restSearch() {
      this.searchForm.code = ''
      this.searchForm.type = ''
      this.getInvoiceData()
    },
    // 删除发票数据
    handlerDelete(data) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(data.id).then(res => {
          this.$message({ message: res.msg, type: 'success' })
          this.getInvoiceData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 关闭dialog
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.$refs['dialogForm'].resetFields()
          done()
        })
        .catch(_ => {})
    },
    // 添加
    addHandler(formName, type, data) {
      // this.$refs[formName].resetFields()
      if (type === 'add') { // 添加
        this.$refs[formName].validate((valid) => {
          if (valid) {
            add(this.dialogForm).then(res => {
              this.$message({ message: res.msg, type: 'success' })
              this.addVisible = false
              this.$refs[formName].resetFields()
              this.getInvoiceData()
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
      if (type === 'edit') { // 编辑
        this.$refs[formName].validate((valid) => {
          if (valid) {
            update(this.dialogForm).then(res => {
              this.$message({ message: res.msg, type: 'success' })
              this.addVisible = false
              this.getInvoiceData()
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    },
    // 打开弹窗
    openAdd() {
      this.dialogForm.code = ''
      this.dialogForm.type = ''
      this.dialogForm.taxRate = ''
      this.dialogForm.taxAmount = ''
      this.dialogForm.userKeyNumber = ''
      this.addVisible = true
      this.dialogTitle = '添加'
    },
    openEdit(data) {
      this.dialogTitle = '修改'
      this.addVisible = true
      this.dialogForm.code = data.code
      this.dialogForm.type = data.type
      this.dialogForm.taxRate = data.taxRate
      this.dialogForm.taxAmount = data.taxAmount
      this.dialogForm.userKeyNumber = data.userKeyNumber
      this.dialogForm.id = data.id
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
